<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Page Title -->
    <title>Portfolio | Spyre - Slick contemporary multipurpose theme</title>

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="180x180" href="../assets/img/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../assets/img/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/img/favicons/favicon-16x16.png">
    <link rel="manifest" href="../assets/img/favicons/site.webmanifest">
    <link rel="mask-icon" href="../assets/img/favicons/safari-pinned-tab.svg" color="#f23838">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <!-- Vendor Stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,700%7CRoboto:300,400,700" rel="stylesheet">
    <link href="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
    <link href="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/@fancyapps/fancybox/dist/jquery.fancybox.min.css" rel="stylesheet">
    <link href="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/aos/dist/aos.css" rel="stylesheet">

    <!-- Theme Stylesheets -->
    <link href="https://spyre-theme.bitbucket.io/v1.2.0/dist/css/theme.min.css" rel="stylesheet">

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-129313359-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-129313359-1');
    </script>
</head>

<body>
<!-- Preloader -->
<div class="preloader">
    <div class="spinner">
        <div class="circles"></div>
    </div>
</div>
<!-- End of Preloader -->


<!-- Header -->
<header class="spyre-navbar navbar navbar-expand-lg bg-secondary navbar-dark fixed-top align-items-center" data-transparent data-text-color="#ffffff">
    <div class="container">
        <a class="navbar-brand mr-lg-5 mr-xl-7" href="index.html">
            <img src="../assets/img/logo.svg" class="d-none d-lg-block" alt="Spyre" width="183" />
            <img src="../assets/img/logo.svg" class="d-block d-lg-none" alt="Spyre" width="150" />
        </a>

        <span class="navbar-text flex-fill d-none d-md-inline-block text-white">
                    Contact us: <a href="#" class="pl-2 text-white">info@spyre.com</a><a href="#" class="pl-5 text-white">+1-202-555-0149</a>
                </span>

        <div class="search d-none d-lg-flex justify-content-end ml-auto mr-2">
            <input class="form-control mr-2" type="text">
            <i class="zmdi zmdi-search"></i>
        </div>

        <div class="menu-toggle">
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="cross">
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

    <!-- Spyrenav Overlay -->
    <div class="spyre-navbar-overlay overlay-slide">
        <div class="container">
            <div class="row">
                <div class="spyre-navbar-nav-container col-md-6 col-lg-5 col-xl-4 bg-white ext-l">
                    <nav class="spyre-navbar-nav">
                        <ul class="spyre-nav">
                            <li class="spyre-nav-item"><a href="index.html" class="spyre-nav-link">Overview</a></li>
                            <li class="spyre-nav-item dropdown">
                                <a href="#" class="spyre-nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li class="dropdown-menu-item"><a href="home.html" class="dropdown-menu-link">Homepage</a></li>
                                    <li class="dropdown-menu-item"><a href="services.html" class="dropdown-menu-link">Services</a></li>
                                    <li class="dropdown-menu-item"><a href="blog.html" class="dropdown-menu-link">Blog</a></li>
                                    <li class="dropdown-menu-item"><a href="blog-single.html" class="dropdown-menu-link">Blog single</a></li>
                                    <li class="dropdown-menu-item active"><a href="portfolio.html" class="dropdown-menu-link">Portfolio</a></li>
                                    <li class="dropdown-menu-item"><a href="about.html" class="dropdown-menu-link">About</a></li>
                                    <li class="dropdown-menu-item"><a href="contact.html" class="dropdown-menu-link">Contact</a></li>
                                    <li class="dropdown-menu-item"><a href="team.html" class="dropdown-menu-link">Team</a></li>
                                    <li class="dropdown-menu-item"><a href="faq.html" class="dropdown-menu-link">Faq</a></li>
                                    <li class="dropdown-menu-item"><a href="pricing.html" class="dropdown-menu-link">Pricing</a></li>
                                    <li class="dropdown-menu-item"><a href="careers.html" class="dropdown-menu-link">Careers</a></li>
                                    <li class="dropdown-menu-item"><a href="careers-single.html" class="dropdown-menu-link">Careers single</a></li>
                                    <li class="dropdown-menu-item"><a href="coming-soon.html" class="dropdown-menu-link">Coming soon</a></li>
                                    <li class="dropdown-menu-item"><a href="404.html" class="dropdown-menu-link">404</a></li>
                                    <li class="dropdown-menu-item"><a href="sign-in.html" class="dropdown-menu-link">Sign In</a></li>
                                    <li class="dropdown-menu-item"><a href="sign-up.html" class="dropdown-menu-link">Sing Up</a></li>
                                    <li class="dropdown-menu-item"><a href="recover-account.html" class="dropdown-menu-link">Recover account</a></li>
                                </ul>
                            </li>
                            <li class="spyre-nav-item"><a href="https://spyre-theme.bitbucket.io/v1.2.0/docs/animations.html" class="spyre-nav-link">Components</a></li>
                            <li class="spyre-nav-item"><a href="../docs/index.html" class="spyre-nav-link">Docs</a></li>
                            <li class="spyre-nav-item"><a href="https://themes.getbootstrap.com/product/spyre-slick-contemporary-multipurpose-theme" target="_blank" class="spyre-nav-link">Purchase</a></li>
                        </ul>
                    </nav>
                </div>

                <div class="col-lg-7 col-xl-8 d-none d-md-block">
                    <div class="d-flex flex-column h-100">
                        <div class="d-flex h-100">
                            <div class="align-self-center">
                                <div class="text-uppercase"
                                     data-background-text="communication"
                                     data-color="#7079a2"
                                     data-opacity="0.02"
                                     data-font-size="85px"
                                     data-font-weight="500"
                                     data-offset-x="-5%"
                                     data-letter-spacing="5px"
                                ></div>
                                <div class="text-uppercase"
                                     data-background-text="planning"
                                     data-color="#7079a2"
                                     data-opacity="0.04"
                                     data-font-size="175px"
                                     data-font-weight="500"
                                     data-offset-x="29%"
                                     data-padding="7vh 0 2vh 0"
                                     data-letter-spacing="5px"
                                ></div>
                                <div class="text-uppercase"
                                     data-background-text="delivering"
                                     data-color="#7079a2"
                                     data-opacity="0.03"
                                     data-font-size="140px"
                                     data-font-weight="500"
                                     data-offset-x="15%"
                                     data-letter-spacing="5px"
                                ></div>
                            </div>
                        </div>

                        <div class="mt-auto">
                            <ul class="nav flex-nowrap float-right">
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-twitter text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-instagram text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-facebook-box text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-pinterest text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-flickr text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-youtube text-white"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End of Spyrenav Overlay -->
</header>
<!-- End of Header -->


<!-- Main Content -->
<main class="main minh-100vh">
    <!-- Section -->
    <section class="py-0 overflow-hidden text-center">
        <div class="bg-container overlay parallax" data-rellax-percentage="0.5" style="background-image: url(../assets/img/backgrounds/bg-09.jpg)"></div>
        <div class="container">
            <div class="row h-100vh align-items-center">
                <div class="col">
                    <h1 class="text-white text-uppercase fs-4 fs-lg-6" data-aos="fade-right" data-aos-duration="1000">Our Work</h1>
                    <p class="mb-5 fs-0 fs-lg-1 text-white" data-aos="fade-right" data-aos-delay="50" data-aos-duration="1000">Lorem ipsum dolor sit amet, consectetur<br class="d-none d-lg-block"/>adipiscing elit. Suspendisse diam.</p>
                    <a href="contact.html" class="btn btn-primary btn-lg px-6" data-aos="fade-right" data-aos-delay="100" data-aos-duration="1000">Get a quote</a>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section class="py-0">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 order-lg-2 py-6 py-lg-9 px-0">
                    <div class="grid">
                        <div class="row no-gutters mt-neg-3">
                            <div class="col-md-6 col-lg-4 p-3 grid-item print vision">
                                <a data-fancybox="gallery" href="../assets/img/portfolio/portfolio-big-01.jpg"><img class="img-fluid w-100" src="../assets/img/portfolio/portfolio-01.jpg" alt="Image 01" /></a>
                            </div>
                            <div class="col-md-6 col-lg-4 p-3 grid-item branding campaign">
                                <a data-fancybox="gallery" href="../assets/img/portfolio/portfolio-big-02.jpg"><img class="img-fluid w-100" src="../assets/img/portfolio/portfolio-02.jpg" alt="Image 02" /></a>
                            </div>
                            <div class="col-md-6 col-lg-4 p-3 grid-item identity vision">
                                <a data-fancybox="gallery" href="../assets/img/portfolio/portfolio-big-03.jpg"><img class="img-fluid w-100" src="../assets/img/portfolio/portfolio-03.jpg" alt="Image 03" /></a>
                            </div>
                            <div class="col-md-6 col-lg-4 p-3 grid-item branding campaign">
                                <a data-fancybox="gallery" href="../assets/img/portfolio/portfolio-big-04.jpg"><img class="img-fluid w-100" src="../assets/img/portfolio/portfolio-04.jpg" alt="Image 04" /></a>
                            </div>
                            <div class="col-12 col-lg-8 p-3 grid-item art vision">
                                <a data-fancybox="gallery" href="../assets/img/portfolio/portfolio-big-05.jpg"><img class="img-fluid w-100" src="../assets/img/portfolio/portfolio-05.jpg" alt="Image 05" /></a>
                            </div>
                            <div class="col-md-6 col-lg-4 p-3 grid-item art online">
                                <a data-fancybox="gallery" href="../assets/img/portfolio/portfolio-big-06.jpg"><img class="img-fluid w-100" src="../assets/img/portfolio/portfolio-06.jpg" alt="Image 06" /></a>
                            </div>
                            <div class="col-md-6 col-lg-4 p-3 grid-item web video">
                                <a data-fancybox="gallery" href="https://www.youtube.com/watch?v=bFc1EqGfd48" class="position-relative">
                                    <img class="img-fluid w-100" src="../assets/img/portfolio/portfolio-07.jpg" alt="Image 07" />
                                    <span class="icon icon-sm position-absolute mt-neg-6 ml-3">
                                                <i class="zmdi zmdi-play zmdi-hc-2x"></i>
                                            </span>
                                </a>
                            </div>
                            <div class="col-md-6 col-lg-4 p-3 grid-item print campaign">
                                <a data-fancybox="gallery" href="../assets/img/portfolio/portfolio-big-08.jpg"><img class="img-fluid w-100" src="../assets/img/portfolio/portfolio-08.jpg" alt="Image 08" /></a>
                            </div>
                            <div class="col-md-6 col-lg-4 p-3 grid-item art vision">
                                <a data-fancybox="gallery" href="../assets/img/portfolio/portfolio-big-09.jpg"><img class="img-fluid w-100" src="../assets/img/portfolio/portfolio-09.jpg" alt="Image 09" /></a>
                            </div>
                            <div class="col-md-6 col-lg-4 p-3 grid-item art vision">
                                <a data-fancybox="gallery" href="../assets/img/portfolio/portfolio-big-10.jpg"><img class="img-fluid w-100" src="../assets/img/portfolio/portfolio-10.jpg" alt="Image 10" /></a>
                            </div>
                            <div class="col-md-6 col-lg-4 p-3 grid-item web online">
                                <a data-fancybox="gallery" href="../assets/img/portfolio/portfolio-big-11.jpg"><img class="img-fluid w-100" src="../assets/img/portfolio/portfolio-11.jpg" alt="Image 11" /></a>
                            </div>
                            <div class="col-md-6 col-lg-4 p-3 grid-item identity vision">
                                <a data-fancybox="gallery" href="../assets/img/portfolio/portfolio-big-12.jpg"><img class="img-fluid w-100" src="../assets/img/portfolio/portfolio-12.jpg" alt="Image 12" /></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 order-lg-1">
                    <div class="pb-6 py-lg-9" data-toggle="sticky">
                        <h5 class="mb-4 text-uppercase text-600">Types</h5>
                        <ul class="mb-6 list-unstyled text-600">
                            <li class="mb-1"><a href="javascript:;" data-filter="*" class="text-600">All</a></li>
                            <li class="mb-1"><a href="javascript:;" data-filter=".art" class="text-600">Art</a></li>
                            <li class="mb-1"><a href="javascript:;" data-filter=".branding" class="text-600">Branding</a></li>
                            <li class="mb-1"><a href="javascript:;" data-filter=".identity" class="text-600">Identity</a></li>
                            <li class="mb-1"><a href="javascript:;" data-filter=".print" class="text-600">Print</a></li>
                            <li class="mb-1"><a href="javascript:;" data-filter=".web" class="text-600">Web</a></li>
                        </ul>

                        <h5 class="mb-4 text-uppercase text-600">Categories</h5>
                        <ul class="list-unstyled text-600">
                            <li class="mb-1"><a href="javascript:;" data-filter="*" class="text-600">All</a></li>
                            <li class="mb-1"><a href="javascript:;" data-filter=".campaign" class="text-600">Campaign</a></li>
                            <li class="mb-1"><a href="javascript:;" data-filter=".online" class="text-600">Online</a></li>
                            <li class="mb-1"><a href="javascript:;" data-filter=".video" class="text-600">Video</a></li>
                            <li class="mb-1"><a href="javascript:;" data-filter=".vision" class="text-600">Vision</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section class="pt-0 text-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col col-md-10 col-lg-6">
                    <h3 class="mb-4 text-uppercase">Our project goal</h3>
                    <p class="text-600">Integer urna nibh, ultricies eget velit sed, ornare mollis nibh. Sed sagittis, enim scelerisque bibendum hendrerit, ligula est sagittis magna, at faucibus eros orci a nunc. Aliquam non mauris at elit.</p>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section class="py-0">
        <div class="container">
            <div class="row justify-content-center align-items-center py-6 bg-secondary text-white text-center">
                <div class="col col-lg-7">
                    <p class="mb-0 fs-1">Lorem ipsum dolor sit amet, consectetur elit.</p>
                </div>
                <div class="col-auto">
                    <a href="#" class="btn btn-outline-light mt-5 mt-lg-0 px-5">Get started</a>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section class="text-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-7">
                    <h3 class="my-0 fs-1 fw-medium text-primary text-uppercase">Subscribe</h3>
                    <h2 class="mb-5 fw-medium text-secondary text-uppercase">Newsletter</h2>
                    <p class="mb-4">Cras dapibus erat ex, sed efficitur ligula interdum ut.</p>

                    <form class="form">
                        <div class="form-group mb-1">
                            <div class="row justify-content-center">
                                <div class="col-lg-8">
                                    <input type="text" class="form-control mb-3 mb-lg-2" placeholder="Email address">
                                </div>
                                <div class="col-8 col-lg-4">
                                    <button type="button" class="btn btn-primary btn-block">Subscribe<i class="zmdi zmdi-mail-send ml-2"></i></button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->
</main>
<!-- End of Main Content -->


<!-- Footer -->
<footer class="footer text-white" style="background-image: url(../assets/img/footer-bg.jpg)">
    <div class="container d-flex h-100">
        <div class="row flex-grow-1">
            <div class="col-lg-3 pt-3 ext-l bg-secondary text-center text-lg-left">
                <div class="d-flex flex-column h-100">
                    <div class="pt-5 pt-lg-8 pb-4">
                        <img src="../assets/img/logo-small.svg" alt="" width="92" class="mb-4" />
                        <p class="mb-4 mt-3 fs--1">New York, NY<br />
                            62 Birchpond St.<br />
                            Crystal Lake, NY 11762</p>

                        <p class="fs--1"><a href="#" class="text-white"><i class="zmdi zmdi-phone zmdi-hc-fw mr-1"></i>+1-202-555-0149</a><br />
                            <a href="#" class="text-white"><i class="zmdi zmdi-email zmdi-hc-fw mr-1"></i>info@spyre.com</a></p>
                    </div>

                    <ul class="mt-4 mt-lg-auto mb-5 mb-lg-0 list-unstyled list-inline">
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-twitter text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-instagram text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-facebook-box text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-pinterest text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-flickr text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-youtube text-white"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col d-flex flex-column mb-2 mt-3 pl-lg-7">
                <div class="row pt-5 pt-lg-8 pb-4 pb-lg-6">
                    <div class="col-6 col-lg-3">
                        <h6 class="mb-1 mb-lg-4 text-uppercase">Services</h6>
                        <ul class="pt-2 mb-5 fw-light list-unstyled">
                            <li class="my-1"><a href="#" class="text-white">Design</a></li>
                            <li class="my-1"><a href="#" class="text-white">Development</a></li>
                            <li class="my-1"><a href="#" class="text-white">Themes</a></li>
                            <li class="my-1"><a href="#" class="text-white">CMS</a></li>
                            <li class="my-1"><a href="#" class="text-white">Mobile</a></li>
                        </ul>
                    </div>
                    <div class="col-6 col-lg-3">
                        <h6 class="mb-1 mb-lg-4 text-uppercase">About</h6>
                        <ul class="pt-2 mb-5 fw-light list-unstyled">
                            <li class="my-1"><a href="#" class="text-white">About Us</a></li>
                            <li class="my-1"><a href="#" class="text-white">Contact</a></li>
                            <li class="my-1"><a href="#" class="text-white">The team</a></li>
                            <li class="my-1"><a href="#" class="text-white">Careers</a></li>
                            <li class="my-1"><a href="#" class="text-white">Locate store</a></li>
                        </ul>
                    </div>
                    <div class="col-6 col-lg-3">
                        <h6 class="mb-1 mb-lg-4 text-uppercase">Help</h6>
                        <ul class="pt-2 mb-5 fw-light list-unstyled">
                            <li class="my-1"><a href="#" class="text-white">Sponsors</a></li>
                            <li class="my-1"><a href="#" class="text-white">FAQs</a></li>
                            <li class="my-1"><a href="#" class="text-white">Stories & Ideas</a></li>
                        </ul>
                    </div>
                </div>

                <div class="mt-auto d-flex justify-content-between">
                    <span class="fs--3 fs-lg--2">&copy; Spyre, 2019 Webinning Ltd.</span>
                    <div class="fs--3 fs-lg--2"><a href="#" class="mr-1 text-white">Privacy Policy</a>|<a href="#" class="ml-1 text-white">Cookie Policy</a></div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- End of Footer -->


<!-- Core Javascripts -->
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/popper.js/dist/umd/popper.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Vendor Javascripts -->
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/rellax/rellax.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/@fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/sticky-kit/dist/sticky-kit.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/isotope-layout/dist/isotope.pkgd.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/isotope-packery/packery-mode.pkgd.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/aos/dist/aos.js"></script>

<!-- Theme Javascripts -->
<script src="https://spyre-theme.bitbucket.io/v1.2.0/dist/js/theme.min.js"></script>
</body>
</html>